<!-- 成本收入比统计 -->
<script lang="ts" setup>
import { getCandRList } from "@/api/system/dataAnalysis";
import { onMounted, ref, reactive, toRefs } from "vue";
import { deptTreeSelect } from "@/api/role";
let headers = [
  { title: "单位名称", sortable: false, key: "typeName" },
  { title: "当期值", sortable: false, key: "currentIncomeRatio1" },
  { title: "标准值", sortable: false, key: "standardIncomeRatio1" },
  { title: "对比结果", sortable: false, key: "result" },
];
const total = ref(0);
let departmentItems = ref([]);
let myData = ref([]);
let data = reactive({
  queryParams: {
    queryTime: "",
    deptIds: [],
    pageNum: 1,
    pageSize: 10,
  },
});
const { queryParams } = toRefs(data);
/** 查询部门下拉树结构 */
const getTreeSelect = async () => {
  const res = await deptTreeSelect();
  departmentItems.value = res.data;
};
const getList = async () => {
  let res = await getCandRList(queryParams.value);
  total.value = res.total;
  myData.value = res.data.list;
  myData.value.forEach((item) => {
    item.currentIncomeRatio1 = Number(item.currentIncomeRatio).toFixed(2) + '%';
    item.standardIncomeRatio1 = Number(item.standardIncomeRatio).toFixed(2) + '%';
  });
  myData.value = myData.value.filter((item) => item.typeName !== '总成本费用收入比');
};
const handleQuery = () => {
  getList();
};
const Resetting = () => {
  queryParams.value = {
    queryTime: "",
    deptIds: [],
    pageNum: 1,
    pageSize: 10,
  };
  getList();
};
const handleSizeChange = (e) => {
  queryParams.value.pageSize = e;
  getList();
};
const handleCurrentChange = (w) => {
  getList();
};
onMounted(() => {
  getList();
  getTreeSelect();
});
let date = ref("");

let departmentVal = ref([]);
</script>

<template>
  <VCard>
    <VCardText class="py-10">
      <VRow class="match-height">
        <VCol cols="12" md="3">
          <div>
            <div>
              <span class="demonstration">公司</span>
            </div>
            <el-tree-select
              class="custom-tree-select"
              v-model="queryParams.deptIds"
              :data="departmentItems"
              :props="{
                value: 'id',
                label: 'label',
                children: 'children',
              }"
              value-key="id"
              placeholder="请选择公司"
              check-strictly
              multiple
            />
          </div>
        </VCol>
        <VCol cols="12" md="3">
          <div class="block">
            <div>
              <span class="demonstration">日期</span>
            </div>
            <el-date-picker
              style="
                background-color: rgb(var(--v-theme-surface));
                inline-size: 100%;
              "
              v-model="queryParams.queryTime"
              type="month"
              align="right"
              unlink-panels
              placeholder="  请选择日期"
              value-format="YYYY-MM-DD"
            >
            </el-date-picker>
          </div>
        </VCol>

        <VCol cols="12" md="2" class="display_flex-end">
          <VBtn color="primary" density="compact" @click="handleQuery">
            查询
          </VBtn>

          <VBtn variant="outlined" density="compact" @click="Resetting">
            重置
          </VBtn>
        </VCol>

        <VCol cols="12" md="12">
          <VDataTable
            :headers="headers"
            :items="myData"
            :items-per-page="10"
            class="text-no-wrap"
          >
            <template #item.result="{ item }">
              <div v-if="Number(item.result) === 2" style="color: green;margin-left:20px;">↓</div>
              <div v-else style="color: red;margin-left:20px;">↑</div>
            </template>
          </VDataTable>
        </VCol>
      </VRow>
    </VCardText>
  </VCard>
</template>

<style lang="scss">
@use "@core/scss/template/libs/apex-chart.scss";

.demonstration {
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
  font-size: 13px;
}

.display_flex-end {
  display: flex;
  align-items: flex-end;
  gap: 15px;
}

.el-picker-panel {
  background-color: rgb(var(--v-theme-surface)) !important ;
}

.el-date-editor .el-input__inner {
  background-color: rgb(var(--v-theme-surface));
  font-size: 13px !important;
}

.el-input__prefix {
  background-color: rgb(var(--v-theme-surface));
  display: none;
}

.el-input__wrapper {
  padding: 0 2px;
}
</style>
